import React, { useEffect } from 'react'
import { RouteConfigComponentProps } from 'react-router-config'

import './index.less'
// eslint-disable-next-line import/extensions
import PigData1 from '@/pages/Protector/assets/lottieFiles/pig/data5.json'

const Demo: React.FC<RouteConfigComponentProps> = () => {

  useEffect(() => {
    console.log(PigData1.assets)
  }, [])



  const downloadImage = (url, name) => {
    const a = document.createElement('a')
    const event = new MouseEvent('click')
    a.download = name
    a.href = url
    a.dispatchEvent(event)
  }

  const downloadAllImage = () => {
    const imgList = document.querySelectorAll('img')
    imgList.forEach((img, index) => {
      // [10, 11, 12, 33, 34, 35, 36, 37, 38, 39].includes(index) && downloadImage(img.src, String(index))
      setTimeout(() => {
        downloadImage(img.src, String(index))
        // eslint-disable-next-line radix
      }, parseInt(String(index / 10)) * 2000)
    })
  }

  const Json2Js = () => {
    PigData1.assets.forEach((el, index) => {
      if (el.id.includes("imgSeq")) {
        if (!el.p.includes('undefined')) {
          el.p = `￥p${ index }￥`
        } else {
          el.p = ''
        }
      }
    })
    console.log(PigData1)
  }

  return (
    <div className="demo">
      <h4>图片列表</h4>
      <div className="download" onClickCapture={ downloadAllImage }>
        下载
      </div>
      <div className="download" onClickCapture={ Json2Js }>
        输出字符串
      </div>
      <div className="img-list">
        {
          PigData1.assets.map(el => <img key={ el.id } src={ el.p } alt="" />)
        }
      </div>
    </div>
  )
}

export default Demo